.scModule {
  &.panel {
    &.scPanel {
      @height: 400px;
      @top: @SYSMARGINTOP;
      @margin: 10px;
      height: @height;
      bottom: auto;
      &.top {
      }
      &.mid {
        top: @SYSMARGINTOP + @margin + @height;
      }
      &.bottom {
        top: @SYSMARGINTOP + (@margin + @height)*2;
      }
    }

    .tableBlock {
      .wrap {
        .filterBlock {
          margin: 0;
        }
      }
    }
  }
  &.leftPanel {
    > .moduleTreeBlock {
      flex: 1;
    }
  }
  &.rightPanel {
    > .block {
      flex: 1;
    }
  }

  &.totalPanel {
    left: 50%;
    transform: translateX(-50%);
    top: -120px;
    font-size: 14px;
    background-image: linear-gradient(to right, fade(@themeDark, 0), fade(@themeDark, 90) 20%, fade(@themeDark, 90) 80%, fade(@themeDark, 0));
    padding: 0 150px;
    display: flex;
    &.open {
      top: @SYSMARGINTOP;
    }
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px;
      .icon {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
      .title {
        font-size: 16px;
        color: @color-white;
        letter-spacing: .1em;
      }
      .count {
        font-size: 30px;
        color: @themeOrange;
        margin-top: 5px;
        .tac;
        .font .numbers;
        .unit {
          margin-left: 0.5em;
          font-size: 0.6em;
        }
      }
    }
  }

  &.menuPanel {
    left: 50%;
    transform: translateX(-50%);
    bottom: -120px;
    font-size: 14px;
    &.open {
      bottom: 80px;
    }
    display: flex;
    padding: 0;
    > .menus {
      display: flex;
      margin: 4px;
      > .menu {
        .rel;
        margin: 0;
        padding: 15px;
        border-right: 1px solid fade(@color-white, 30);
        &:last-child {
          border-right: none;
        }
        .animation();
        background-color: fade(black, 70);
        cursor: pointer;
        &:hover {
          background-color: fade(black, 90);
        }

        &.active {
          background-color: fade(@theme, 60);
          &:hover {
            background-color: fade(@theme, 90);
          }
        }

        .icon {
          width: 24px;
          height: 24px;
          margin: 0 13px;
          display: block;
        }
        .label {
          font-size: 12px;
          height: 12px;
          line-height: 12px;
          margin-top: 4px;
          .tac;
        }
        .alert {
          .abs;
          width: 20px;
          height: 20px;
          right: 0;
          top: 0;
          background-color: red;
          color: white;
          border-radius: 20px;
          font-size: 12px;
          line-height: 20px;
          .tac;
        }
      }
    }
  }
}